<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/react.css" />
    <link rel="stylesheet" href="../css/register.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div class="continer" id="continer">
      <div class="header">
        <div class="left">
          <h1><img src="../images/re_03.jpg" alt="京东" /></h1>
          <span>欢迎注册</span>
        </div>
        <div class="right">
          <span>已有账号?</span>
          <a href="./login.html">请登录></a>
        </div>
      </div>
    </div>
    <!-- 注册 -->
    <div id="continer">
      <div class="register">
        <div class="box">
          <div class="ts"></div>
          <li>
            <span>用户名</span
            ><input class="username" type="text" placeholder="请输入用户名" />
          </li>
          <p></p>
          <li>
            <span>密码</span
            ><input class="password" type="password" placeholder="请输入密码" />
          </li>
          <p></p>
          <li>
            <span>确认密码</span
            ><input
              type="password"
              class="newpass"
              placeholder="请再次输入密码"
            />
          </li>
          <p></p>
          <li>
            <span>手机号码</span
            ><input type="text" class="phone" placeholder="请输入手机号码" />
          </li>
          <p></p>
          <li>
            <span>邮箱验证</span
            ><input class="email" type="text" placeholder="请输入邮箱" />
          </li>
          <p></p>
          <button class="btn">立即注册</button>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/Ajax.js"></script>
  <script>
    //验证用户名
    function pass() {
      $(".username").blur(function() {
        if (
          $(".username")
            .val()
            .trim() == ""
        ) {
          console.log($(".username").next());

          $(".username")
            .parent()
            .next()
            .text("用户名不为空");
          $(".username")
            .parent()
            .next()
            .css("color", "red");

          return false;
        } else if (
          $(".username")
            .val()
            .trim().length < 4 ||
          $(".username")
            .val()
            .trim().length > 8
        ) {
          $(".username")
            .parent()
            .next()
            .text("用户名在4-8位");
          $(".username")
            .parent()
            .next()
            .css("color", "red");

          return false;
        } else {
          $(".username")
            .parent()
            .next()
            .text("符合规定");
          $(".username")
            .parent()
            .next()
            .css("color", "green");
        }
      });
      //验证密码
      $(".password").blur(function() {
        if (
          $(".password")
            .val()
            .trim() == ""
        ) {
          $(".password")
            .parent()
            .next()
            .text("密码不为空");
          $(".password")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          $(".password")
            .val()
            .trim().length < 8 ||
          $(".password")
            .val()
            .trim().length > 16
        ) {
          $(".password")
            .parent()
            .next()
            .text("密码在8-16位");
          $(".password")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else {
          $(".password")
            .parent()
            .next()
            .text("符合规定");
          $(".password")
            .parent()
            .next()
            .css("color", "green");
        }
      });

      $(".newpass").blur(function() {
        if (
          $(".newpass")
            .val()
            .trim() == ""
        ) {
          $(".newpass")
            .parent()
            .next()
            .text("密码不为空");
          $(".newpass")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          $(".newpass")
            .val()
            .trim().length < 8 ||
          $(".newpass")
            .val()
            .trim().length > 16
        ) {
          $(".newpass")
            .parent()
            .next()
            .text("密码在8-16位");
          $(".newpass")
            .parent()
            .next()
            .css("color", "red");

          return false;
        } else if (
          $(".newpass")
            .val()
            .trim() !=
          $(".password")
            .val()
            .trim()
        ) {
          $(".newpass")
            .parent()
            .next()
            .text("两次密码不一致");
          $(".newpass")
            .parent()
            .next()
            .css("color", "red");
        } else {
          $(".newpass")
            .parent()
            .next()
            .text("符合规定");
          $(".newpass")
            .parent()
            .next()
            .css("color", "green");
        }
      });
      //验证手机号
      $(".phone").blur(function() {
        var reg = /^1[3,5,6,7]\d{9}$/;
        if (
          $(".phone")
            .val()
            .trim() == ""
        ) {
          $(".phone")
            .parent()
            .next()
            .text("手机号不为空");
          $(".phone")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          $(".phone")
            .val()
            .trim().length != 11
        ) {
          $(".phone")
            .parent()
            .next()
            .text("手机号为11位");
          $(".phone")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          !reg.test(
            $(".phone")
              .val()
              .trim()
          )
        ) {
          $(".phone")
            .parent()
            .next()
            .text("请输入正确的手机号");
          $(".phone")
            .parent()
            .next()
            .css("color", "red");
        } else {
          $(".phone")
            .parent()
            .next()
            .text("符合规定");
          $(".phone")
            .parent()
            .next()
            .css("color", "green");
        }
      });

      //验证邮箱
      $(".email").on("input", function() {
        var reg = /\w{4,16}@(qq|163)\.(cn|com)$/;
        if (
          $(".email")
            .val()
            .trim() == ""
        ) {
          $(".email")
            .parent()
            .next()
            .text("邮箱不为空");
          $(".email")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          !reg.test(
            $(".email")
              .val()
              .trim()
          )
        ) {
          $(".email")
            .parent()
            .next()
            .text("请输入正确的邮箱");
          $(".email")
            .parent()
            .next()
            .css("color", "red");
        } else {
          $(".email")
            .parent()
            .next()
            .text("符合规定");
          $(".email")
            .parent()
            .next()
            .css("color", "green");
        }
      });
    }
    pass();
    //数据验证
    document.querySelector(".btn").onclick = function() {
      pass();

      var p = document.querySelectorAll(".box p");
      for (var i = 0; i < p.length; i++) {
        // console.log(p[i].innerText.indexOf("符合规定"));

        if (p[i].innerText.indexOf("符合规定") < 0 || p[i].innerText == "") {
          document.querySelector(".ts").innerHTML = "请正确输入";
          document.querySelector(".ts").style.color = "red";
          return false;
        }

        var password = document.querySelector(".password").value;
        var username = document.querySelector(".username").value;
        var phone = document.querySelector(".phone").value;
        var email = document.querySelector(".email").value;

        setAjax({
          url: "../server/register.php",
          dataType: "json",
          data: {
            username: username,
            password: password,
            phone: phone,
            email: email
          },
          type: "post",
          success: function(res) {
            // console.log(res);
            if (res.status == 200) {
              document.querySelector(".ts").innerHTML = res.msg;
              document.querySelector(".ts").style.color = "green";

              setTimeout(function() {
                location.href = "./login.html";
              }, 1000);
            } else {
              document.querySelector(".ts").innerHTML = res.msg;
              document.querySelector(".ts").style.color = "red";
            }
          }
        });
        return false;
      }
    };
  </script>
</html>
